<template>
  <div class="myExamList-box">
  	<el-row :gutter="5">

  		<el-col :span="14"></el-col>
  		<el-col :span="6"><el-input v-model="input" placeholder="请输入关键词"></el-input></el-col>
  		<el-col :span="2"><el-button type="info" plain>搜索</el-button></el-col>
  	</el-row>
    <Table
      :tableData="tableData"
      :inits="tableinits"
      :operation="operationinits">
      <template slot-scope="{rowScope}">
        <el-button v-if="rowScope.row.finished == 3 || rowScope.row.finished == -2 " @click="check(rowScope)" type="text" size="small">查看详细</el-button>
        <el-button v-if="(rowScope.row.finished == 3 || rowScope.row.finished == -2 )&&$route.name=='我的练习'" @click="joinExam(rowScope)" type="text" size="small">再次练习</el-button>
        <el-button v-else-if="rowScope.row.finished == 1" @click="joinExam(rowScope)" type="text" size="small">参加考试</el-button>
        <el-button v-else-if="rowScope.row.finished == 2" @click="joinExambu(rowScope)" type="text" size="small">参加补考</el-button>
      </template>
    </Table>
    <!-- 分页器 S -->
    <el-row>
      <el-col>
        <el-pagination
          layout="prev, pager, next"
          :page-size="15"
          :current-page="pageNo"
          :total="total"
          @current-change="pageNoChange">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 分页器 E -->

    <!-- 详情的弹窗 S -->
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="70%">
      <Table
        maxHeight="300"
        :tableData="detail_tableData"
        :inits="detail_tableinits"
        :operation="operationinit">
				      <template slot-scope="{rowScope}">
				        <el-button @click="toError(rowScope)"  type="text" size="small">查看</el-button>
				      </template>
      </Table>
      <!-- 分页器 S -->
      <el-row>
        <el-col>
          <el-pagination
            layout="prev, pager, next"
            :page-size="15"
            :current-page="detail_pageNo"
            :total="detail_total"
            @current-change="detail_pageNoChange">
          </el-pagination>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
    <!-- 题目选择对话框 E -->


  </div>
</template>

<script>
import Table from '@/components/Table'
import { exam_fmt_getMyExams } from '@/util/dataFMT'

export default {
  name: 'MyExamList',
  components: {
    Table
  },
  mounted () {
    this.sim = this.$route.name == '我的考试' ? 0 : 1

    this.$API.getMyExams({page: this.pageNo, sim: this.sim})
    .then(data => {
      this.total = data.total
      this.tableData = exam_fmt_getMyExams(data.data)
    })
  },
  data () {
    return {
      dialogVisible: false,
      detail_tableData: [],
      detail_tableinits: [
        { label: '开始时间', prop: 'start_at' },
        { label: '交卷时间', prop: 'submit_at' },
        { label: '考试分数', prop: 'score' },
        { label: '考试结果', prop: 'is_pass' }
      ],
      operationinit: { width: '100', label: '查看试卷' },
      detail_total: 0,
      detail_pageNo: 1,
      pageNo: 1,
      total: 0,
    	input:'',
      examid: '',
      tableData: [],
      tableinits: [
        { label: '编号', width: '55', prop: 'id' },
        { label: '考试名称', width: '160', notooltip:true, prop: 'name' },
        { label: '考试开始时间', width: '', prop: 'startTime' },
        { label: '考试结束时间', width: '', prop: 'endTime' },
        { label: '交卷时间', width: '', prop: 'finishedTime' },
        { label: '考试分数', width: '100', prop: 'score' },
        { label: '考试结果', width: '100', prop: 'result' }
      ],
      operationinits: { width: '200', label: '操作' }
    }
  },
  methods: {
    toExam(row){
      this.$router.push(`/examing/${row.row.id}?makeup=1`)
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.$API.getMyExams({page: this.pageNo, sim: this.sim})
      .then(data => {
        this.tableData = exam_fmt_getMyExams(data.data)
      })
    },
    detail_pageNoChange (pageNo) {
      this.detail_pageNo = pageNo
      this.$API.getMyExamDetail(this.examid, {page: this.pageNo})
      .then(data => {
        data.data.forEach(item => {
          item.is_pass = item.is_pass ? '通过' : '未通过'
        })
        this.detail_tableData = data.data
      })
    },
    check (scope) {
      this.examid = scope.row.id
      this.$API.getMyExamDetail(this.examid, {page: 1})
      .then(data => {
        this.dialogVisible = true
        console.log(data)
        data.data.forEach(item => {
          item.is_pass = item.is_pass ? '通过' : '未通过'
        })
        this.detail_tableData = data.data
        this.detail_total = data.total
        this.detail_pageNo = 1
      })
    },
    toError (scope) {
      let open = window.open(`/#/examing/checkError/${scope.row.id}`, '_blank')
      open.opener = null;
    },
    joinExam (scope) {
      if (scope.row.finishedTime == '暂未开始考试') {
        return ;
      }

      this.$API.is_startExam(scope.row.id)
      .then(data => {
      	this.$router.push(`/examing/${scope.row.id}`)
      })
    },
      joinExambu (scope) {
      if (scope.row.finishedTime == '暂未开始考试') {
        return ;
      }

      this.$API.is_startExam(scope.row.id+'?makeup=1')
      .then(data => {

      	this.$router.push(`/examing/${scope.row.id}?makeup=1`)
      })
    }


  }
}
</script>

<style>
.myExamList-box {
  text-align: left;
}
</style>
